<script lang="ts" setup>
	import dayjs from '#build/dayjs.imports.mjs'
	import { getCategoryList, getExpertWorkInfo, zyjkkpList, getkpzlList, getPrizeWinningdata } from '~/api/home'
	import { getUrlByFileNo } from '~/api/file';

	const title = ref('中医健康科普')
	const routePath = [{ name: '首页', path: '/' }, { name: title }]
	const total = ref(0)
	const infoType = ref('All')
	const valuedate = ref()
	const timeYS = ref('background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);color:#fff')
	const infocss = ref('background:linear-gradient(88.92deg, rgba(92,224,168,0.41) 1.07%,rgba(195,228,214,0.22) 99.94%);padding-left:10px')
	let queryParams = reactive(
		{
			page: {
				rownumber: 16,
				pageNo: 1,
			},
			positions: '首页',
			condition: [],
		},
	)


	function getTimePeriod(periodType : string | undefined) {
		if (periodType) {
			const currentDate = new Date()

			switch (periodType) {
				case '1':
					const oneWeekAgo = new Date(currentDate)
					oneWeekAgo.setDate(currentDate.getDate() - 7)
					return { start: oneWeekAgo, end: currentDate }
				case '2':
					const oneMonthAgo = new Date(currentDate)
					oneMonthAgo.setMonth(currentDate.getMonth() - 1)
					return { start: oneMonthAgo, end: currentDate }
				case '3':
					const sixMonthsAgo = new Date(currentDate)
					sixMonthsAgo.setMonth(currentDate.getMonth() - 6)
					return { start: sixMonthsAgo, end: currentDate }
				case '4':
					if (valuedate.value)
						return { start: valuedate.value[0], end: valuedate.value[1] }
					else return { start: '', end: '' }
				default:
					throw new Error('Invalid period type. Choose from "week", "month", or "sixMonths"')
			}
		}
	}

	const keyType = ref('')
	const name = ref('中医科普资料/')

	function keyTypeClisk(item : string) {
		keyType.value = item
		if (queryParams.condition) {
			const index = queryParams.condition.findIndex(item1 => item1.colName == 'classify_name')
			if (index >= 0) {
				queryParams.condition[index].value = name.value + keyType.value
			} else {
				queryParams.condition.push({
					colName: 'classify_name',
					value: name.value + keyType.value,
					ruleType: 'like]',
				})
			}
		} else {
			queryParams.condition = []
			queryParams.condition.push({
				colName: 'classify_name',
				value: name.value + keyType.value,
				ruleType: 'like]',
			})
		}
		queryParams.page.pageNo = 1
		getPopularScienceMaterialsData()
	}

	function typeClick(item : string) {
		if (item === infoType.value) {
			item = ''
		}
		infoType.value = item
		keyTypeClisk(item)
	}

	const PopularScienceMaterials = ref<any[]>([])

	// 分页参数更改
	function onPageChangeKPZL(params : { pageNum : number, pageSize : number }) {
		queryParams.page.pageNo = params.pageNum
		getPopularScienceMaterialsData()
	}

	async function getPopularScienceMaterialsData() {
		try {
			const res = await zyjkkpList(queryParams)
			PopularScienceMaterials.value = res.data
			total.value = res.page.total
		} catch (error) {

		}
	}

	const router = useRouter()

	function toDetail(item : any, type : any) {
		console.log('item', item)
		router.push({ path: `/peopleHealth/outKnowledgeDetail/${item}&${type}` })
	}



	const typeList = ref([])

	onMounted(async () => {
		await getPopularScienceMaterialsData()

		const res = await getCategoryList({
			condition: [{
				colName: 'path_name',
				ruleType: 'like]',
				value: '中医科普资料%',
			}],
		})
		typeList.value = res.data[0].children
		console.log('typeList', typeList.value)
	})
	const bg1 = `background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);`
	const backInit = () => {
		location.reload()
	}
</script>

<template>
	<div>
		<PublicSearch type="中医科普资料" />
		<PublicSearchDialog type="中医科普资料" />
		<div class="px-40 pb-80px">
			<div class="bg-#fff">
				<CommonPageContainer :title="title" :path="routePath">
					<div v-if="infoType !== 'All'" class="mt-20px w-85%">
						<div class="w-100%">
							<div class="h-40px flex justify-between pr-30px">
								<div class="flex items-center">
									<div class="mb-20px flex items-center py-5">
										<div class="h-40px w-40px flex cursor-pointer items-center justify-center rounded-md"
											:style="bg1" @click="backInit">
											<div
												class="h-18px w-18px flex items-center justify-center rounded-50% bg-#fff">
												<span class="flex items-center -ml-2px" text="#AC8358">&lt;</span>
											</div>
										</div>
										<span class="pl-4 font-extrabold" text="#016738">{{ infoType }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="flex justify-between">
						<div class="w-85%">
							<div class="mt-20px w-95%">
								<div grid="~ cols-[repeat(auto-fill,_minmax(200px,_1fr))] gap-10px">
									<div v-for="item in PopularScienceMaterials" :key="item.id"
										class="overflow-hidden rounded-6px" border="1px solid #E5E7EB" shadow="hover:sm"
										hover="text-#AC8358">
										<el-image class="h-150px w-100% cursor-pointer"
											fit="cover" lazy :src="getImgUrl(item.cover_file_name,false,'/img/zyjkkp.png')"
											@click="toDetail(item.id, '中医健康科普详情')">
											<template #placeholder>
												<div class="image-slot">
													<i class="i-ri:loader-fill loader" />
												</div>
											</template>
										</el-image>
										<div class="cursor-pointer truncate p-2"
											@click="toDetail(item.id, '中医健康科普详情')">
											{{ item.title_name }}
										</div>
										<div class="flex items-center justify-between p-2">
											<div text="#333">{{ dayjs(item.release_time).format('YYYY-MM-DD') }}
											</div>
											<!-- <div class="cursor-pointer rounded-sm p-1" text="#35B389 14px" border="1px solid #35B389" >
                        查看详情
                      </div> -->
										</div>
									</div>
								</div>
								<div class="mt-15px w-100% flex justify-end pr-20px">
									<PublicPagination :page-size="queryParams.page.rownumber"
										:page-num="queryParams.page.pageNo" :total="total" @change="onPageChangeKPZL" />
								</div>
							</div>
						</div>
						<div class="min-w-150px w-15%">
							<div v-if="typeList.length">
								<div class="h-10px flex items-center rounded-tl rounded-tr px-5px py-5px"
									:style="timeYS" />
								<div class="rounded-bl rounded-br" border="2px solid #AC8358">
									<div v-for="item in typeList" :key="item.id"
										class="flex cursor-pointer items-center p-2 pl-5"
										:style="infoType === item.classify_name ? infocss : ''"
										@click="typeClick(item.classify_name)">
										<!-- @click="typeClick(item.classify_name)" -->
										<img v-if="infoType === item.classify_name" src="/img/right-f.png" alt=""
											class="pr-5px" style="flex-shrink: 0;width: 25px;height: 24px;">
										{{ item.classify_name }}
									</div>
									<!-- <div class="p-2 pl-10 cursor-pointer" :style="infoType === '获奖作品' ? infocss : ''"
                    @click="typeClick('获奖作品')">
                    <i v-if="infoType === '获奖作品'"
                      class="i-ri:arrow-right-circle-line cursor-pointer text-#AC8358 w-25px h-25px" />
                    获奖作品
                  </div> -->
								</div>
							</div>
							<div class="mt-20px" v-if="PopularScienceMaterials.length">
								<div class="h-30px flex items-center rounded-tl rounded-tr px-10px py-5px"
									style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);">
									<img src="/img/tj.png" alt="">
									<div class="pl-15px" text="#fff 16px">
										推荐
									</div>
								</div>
								<div class="cursor-pointer rounded-bl rounded-br px-10px py-5px"
									border="2px solid #AC8358">
									<div v-for="item in PopularScienceMaterials.slice(0, 3)" hover="text-#AC8358"
										:key="item.id" @click="toDetail(item.id, '推荐')">
										<!-- 三元 -->
										<el-image
											:src="getImgUrl(item.cover_file_name,false,'/img/zyjkkp.png')"
											fit="cover" lazy alt="" class="h-124px w-100%" />
										<div class="py-10px" text="14px">
											{{ item.title_name }}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</CommonPageContainer>
			</div>
		</div>
	</div>
</template>

<style lang="scss">
	.image-slot {
		width: 100%;
		height: 150px;
		background-color: #f5f7fd;
		background-image: url('/img/placeholder.jpg');
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		// 实现一个无限循环转圈的loading动画
		.loader {
			display: inline-block;
			animation: loader 1s infinite linear;
			color: #fff;

			&::before {
				content: '';
				width: 100%;
				height: 100%;
				background-color: rgba($color: #000000, $alpha: 0.6);
				position: absolute;
				top: 0;
				left: 0;
			}
		}

		@keyframes loader {
			0% {
				transform: rotate(0deg);
			}

			50% {
				transform: rotate(180deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}
	}
</style>